<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon">
    <title>雪月蛋糕</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            overflow-x: hidden;
        }
        section {
            padding: 20px;
            text-align: center;
        }

        .product-container {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .product-card {
            width: calc(25% - 20px);
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .product-card h3 {
            margin: 0;
            font-size: 16px;
        }

        .product-card p {
            margin: 0;
            font-size: 14px;
            color: #777;
        }


        footer {
            background-color: #de7d16;
            color: rgb(255, 255, 255);
            padding: 20px;
            text-align: center;
            width: 100%; /* 使用百分比使其宽度自适应 */
            /*display: none;*/
        }
    </style>
</head>
<body>
<br>
<ul class="layui-nav layui-bg-gray" style="text-align: center">
    <li class="layui-nav-item "><a href="../client/index.html" class="layui-font-red layui-font-32">雪月蛋糕</a></li>
    <li class="layui-nav-item"><a href="../client/index.html">首页</a></li>
    <li class="layui-nav-item">
        <a href="goodsmanage.html">商品分类</a>
    </li>
    <li class="layui-nav-item"><a href="">热销</a></li>
    <li class="layui-nav-item"><a href="">新品</a></li>
    <li class="layui-nav-item ">
        <a href="javascript:;">我的</a>
        <dl class="layui-nav-child">
            <dd><a href="order.html">我的订单</a></dd>
            <dd><a href="myroom.html">个人信息</a></dd>
            <dd><a href="index.html">退出登录</a></dd>
        </dl>
    </li>
</ul>
<br>
<div class="layui-carousel" id="ID-carousel-demo-image">
    <div carousel-item>
        <div><img src="../../img/微信图片_20231228111756.jpg"></div>
        <div><img src="../../img/微信图片_20231228111801.jpg"></div>
        <div><img src="../../img/cdc70990bb21ec80e98f7fa533871d7.jpg"></div>
        <div><img src="../../img/96fafacbf33e84c191efa28d0db80c5.jpg"></div>
    </div>
</div>
<div class="layui-container">
    <div id="productContainer" class="layui-row">
        <section>
            <div id="nav" class="product-container">
                <script id="productTpl" type="text/html">
                    {{# layui.each(d.data, function(index, item){ }}
                    <div id="dj" class="product-card product-clickable" data-product-id="{{item.id}}">
                        <img src="{{item.img}}">
                        <h3>{{ item.cakename }}</h3>
                        <p>{{ item.des }}</p>
                        <p>￥{{ item.price }}</p>
                    </div>
                    {{# }); }}
                </script>
            </div>
        </section>
    </div>
</div>
<footer>
    <p>121&copy; 2023 蛋糕店. All rights reserved.</p>
</footer>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../layui/layui.js"></script>
<script>
    layui.use(function () {
        var carousel = layui.carousel;
        // 渲染 - 图片轮播
        carousel.render({
            elem: '#ID-carousel-demo-image',
            width: '1911.5px',
            height: '700px',
            interval: 3000
        });
    });
</script>
<script>
        layui.use(['element', 'layer', 'util'], function () {
            // var element = layui.element;
            var layer = layui.layer;
            // var util = layui.util;
            var laytpl = layui.laytpl;
            var $=layui.jquery;
            var $ = layui.$;

            $.ajax({
                url: '/home/index', // 替换为后端接口地址
                type: 'GET',
                success: function (data) {
                    var getTpl = $("#productTpl").html();//html()是把模板放入頁面
                    laytpl(getTpl).render(data, function (str) {
                        $("#nav").html(str);
                    });
                },
                error: function () {
                    layer.alert("请先登录后再访问",{
                        title:"错误信息",
                        icon:2
                    },function (){
                        location.href="../login.html";
                    });
                }
            });
            $('#productContainer').on('click', '.product-clickable',function(){
                // 获取商品ID
                var productId = $(this).data('product-id');

                // 执行页面跳转
                location.href = '../client/goods.html?id='+encodeURIComponent(productId);
            });
    });
</script>
</body>
</html>